<template>
	<scroll-view class="top" :scroll-y="true" @scrolltolower="scrolltolower">
		<view class="nav"></view>
		<view style="position: relative;">
			<view class="" @click="goBack()">
				<u-icon name="arrow-left" class="fan" color="#fff" size="50"></u-icon>
			</view>
			<view class="bar_text">
				<!-- <text class="bar_gui" @click="goGuize()">规则说明</text> -->
			</view>
		</view>
		<view class="bar_tou">
			<view class="bar_zhuan">
				VS砍价专区
			</view>
			<view class="bar_kai">
				开启拼团模式
			</view>
		</view>
		<view class="bar_img">
			<image src="../../static/bargain/key.png" mode=""></image>
		</view>
		<view class="bar_show" v-if="isShow == true" v-for="(item,index) in dataInfo">
			<view class="bar_ing">
				砍价进行中
			</view>
			<view class="bar_kshop">
				<view class="bar_left">
					<image :src="item.image" mode="" class="bar_fu"></image>
				</view>
				<view class="bar_right">
					<!-- endTime为结束的时间 startTime为请求到的当前服务端时间  格式YYYY-MM-DD HH:mm:ss-->
					<view style="margin-top: 30rpx;display: flex;align-items: center;">
						距离结束<countdown :endTime="item.overTime" :startTime="item.nowTime"  @overTime="delTime"/>
					</view>
					<view style="font-size: 32rpx;margin-top: 40rpx;">
						已砍<text style="color: #FFE24E;">{{item.cutMoney}}</text>元，只差<text style="color: #FFE24E;">{{item.goodsPrice - item.cutMoney}}</text>元
					</view>
					<view class="bar_pro">
						
					</view>
					<view style="font-size: 26rpx;">
						赶紧邀请好友来砍一刀
					</view>
					<view class="bar_conk" @click="goContinue(item.taskId,item.nowTime,item.overTime,item.cutMoney,item.goodsPrice)">
						继续砍价
					</view>
					<view class="bar_conk" v-if="item.isFloorBuy==1&&item.isFloor==1" @click="buy(item.taskId)">
						立即购买
					</view>
					<view class="bar_conk" v-if="item.isFloorBuy==0"  @click="buy(item.taskId)">
						立即购买
					</view>
				</view>
			</view>
		</view>
		
		<!-- <view class="bar_sky">
			<image src="../../static/bargain/top.png" mode=""></image>
		</view> -->
		<view class="bar_shop">
			<view class="bar_item" v-for="(item,index) in list">
				<image src="../../static/bargain/border.png" mode="" class="bar_shopimg">
				</image>
				<image :src="item.goodsImage" mode="aspectFill" class="bar_items"></image>
				<view class="bar_ind">
					{{item.goodsName}}
				</view>
				<view class="bar_kan" @click="showBtn(item.activeId)">
					砍价免费拿
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import {
		kjgoods,kanjia
	} from "../../api/product.js"
	import countdown from "@/components/cz-countdown/cz-countdown.vue"
	export default {
		data() {
			return {
				isShow: false,
				num: 1,
				list:[],
				flag:true,
				dataInfo:[],
				nowTime:"",
			}
		},
		components:{countdown},
		onLoad() {
			this.getInfo()
		},
		methods: {
			buy(id){
				uni.navigateTo({
					url:"/pages/product/kjorder?id="+id
				})
			},
			async showBtn(id) {
				this.msg("暂无砍价资格...","none")
				// if(this.Md.islogin()){
				// 	let res=await this.get(kanjia,{bargainId:id})
				// 	this.dataInfo=[]
				// 	this.getInfo()
				// }
			},
			goBack() {
				console.log(241)
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			goContinue(id,nt,ot,kprice,price) {
				uni.navigateTo({
					url: '/pages/bargain/mybargain?id='+id+"&ntime="+nt+"&otime="+ot+"&cmoney="+kprice+"&price="+price
				})
			},
			goGuize() {
				uni.navigateTo({

				})
			},
			async getInfo() {
				let res = await this.get(kjgoods, {
					pageSize:10 ,
					pageNum: this.num
				})
				if(res.data.bargainActiveList.length<10){
					this.flag=false
				}
				if(res.data.bargainTaskList.length>0){
					res.data.bargainTaskList.forEach(item=>{
						item.overTime=this.$u.timeFormat(item.endTime, 'yyyy-mm-dd hh:MM:ss')
						item.nowTime=this.$u.timeFormat(res.data.nowDate, 'yyyy-mm-dd hh:MM:ss')
						this.dataInfo.push(item)
					})
					this.isShow = true
				}
				this.list=[...this.list,...res.data.bargainActiveList]
				this.num++
			},
			// 容器触底
			scrolltolower() {
				if(this.flag==true){
					this.dataInfo=[]
					this.getInfo()
				}
				console.log("触底了")
			},
			delTime(){
				
			}
		}
	}
</script>

<style lang="scss">
	.nav {
		height: var(--status-bar-height);
		width: 100%;
	}
	.top {
		background-image: linear-gradient(#542CEA, #FFD883);
		height: 100vh;

		.fan {
			position: absolute;
			top: 26rpx;
			left: 20rpx;
			width: 40rpx;
			height: 40rpx;
			z-index: 222
		}

		.bar_show {
			text-align: center;
			margin: 0 36rpx;
			margin-bottom: 200rpx;
			width: 683rpx;
			height: 418rpx;

			.bar_ing {
				width: 683rpx;
				height: 87rpx;
				text-align: center;
				line-height: 87rpx;
				background-color: #FFE24E;
				color: #4925FC;
				font-size: 36rpx;
				border-radius: 10rpx 10rpx 0 0;
			}

			.bar_kshop {
				width: 683rpx;
				// height: 385rpx;
				background-color: #5931E6;
				border-radius: 0 0 10rpx 10rpx;
				display:flex;
				align-items:center;
				.bar_left {
					float: left;
					width: 251rpx;
					position: relative;

					.bar_fu {
						// position: absolute;
						// top: 50%;
						// left: 50%;
						// transform: translate(-50%, -50%);
						width: 207rpx;
						height: 207rpx;
						border-radius: 50%;
					}
				}

				.bar_right {
					float: left;
					color: #fff;
					padding-bottom:40rpx;
					box-sizing: border-box;
					.bar_pro {
						width: 333rpx;
						height: 15rpx;
						background-color: #FFE24E;
						border-radius: 20rpx;
						margin: 20rpx 0;
					}

					.bar_conk {
						width: 333rpx;
						height: 70rpx;
						font-size: 30rpx;
						text-align: center;
						line-height: 70rpx;
						color: #5931E6;
						background-color: #fff;
						border-radius: 50rpx;
						margin-top: 20rpx;
					}
				}
			}
		}

		.bar_text {
			position: relative;
			width: 100%;
			height: 148rpx;

			.bar_gui {
				position: absolute;
				top: 26rpx;
				right: 30rpx;
				font-size: 36rpx;
				color: #FFFA4D;
			}
		}

		.bar_tou {
			text-align: center;

			.bar_zhuan {
				font-size: 80rpx;
				color: #FFE24E;
			}

			.bar_kai {
				font-size: 54rpx;
				color: #FFE24E;
			}
		}

		.bar_img {
			text-align: center;
			margin-top: 33rpx;

			image {
				width: 654rpx;
				height: 424rpx;
			}
		}

		.bar_sky {
			text-align: center;
			margin-top: -96rpx;

			image {
				width: 676rpx;
				height: 80rpx;
			}
		}

		.bar_shop {
			display: flex;
			-webkit-flex-wrap: wrap;
			flex-wrap: wrap;
			justify-content: space-between;
			margin: 0 36rpx;
			// margin-top:rpx;
			width: 676rpx;
			background-color: #7347D6;
			padding-top: 40rpx;
			padding: 30rpx 30rpx 0;

			.bar_item {
				position: relative;

				.bar_shopimg {
					width: 294rpx;
					height: 351rpx;
					margin-bottom: 20rpx;
					text-align: center;
				}

				.bar_items {
					position: absolute;
					top: 80rpx;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 161rpx;
					height: 161rpx;
				}

				.bar_ind {
					position: absolute;
					top: 200rpx;
					left: 50%;
					transform: translate(-50%, -50%);
					font-size: 16rpx;
				}

				.bar_kan {
					position: absolute;
					bottom: 55rpx;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 200rpx;
					height: 40rpx;
					border-radius: 50rpx;
					background-color: #FF6600;
					color: #fff;
					text-align: center;
				}
			}
		}
	}
</style>
